import Vue from 'vue'

/** 打开日志弹出框
 *  interface options{
 *     success(result:<success:boolean,message:string>){},
 *     cancel(){},
 *     components:{modify:()=>import('../你的组件.vue'),}
 *     data:{...你给组件init的时候参数}
 *     title:""
 *  }
 *  你的组件 必须要有的方法 initByDialog(){ this.dialogVisible=true }
 *                      submitByDialog(){return promise<success:boolean,messageLstring>}
 * */

import './style.scss'
import modifyDialog3 from './modifyDialog3.jsx'
import {createUUID} from '@/utils'

const dialogMap = {}

/**
 * @description:
 * @params .immediate 是否立刻mouuted 触发
 * @params closeOnClickModal
 * @return
 */


const FormDialog = async function (options = {}) {
    var uuid = options.uuid || createUUID()
    let $dom = undefined
    var dialogCom = undefined
    var dialogBodyCom = undefined
    var dialogHeader = undefined;
    var dialogFooter = undefined;
    var dialogClass = options?.dialogClass
    // 添加标记变量
    var isRemoveCalled = false

//嵌入onAfterComonentMounted
    options._onAfterComonentMounted = function () {
        //before  控制dialog的maxHeight .el-dialog .el-dialog__body
        dialogBodyCom = dialogCom && dialogCom.find('.el-dialog__body')
        dialogHeader = dialogCom && dialogCom.find('.el-dialog__header');
        dialogFooter = dialogCom && dialogCom.find('.el-dialog__footer');

        /*  var body_clientHeight=dialogBodyCom&&dialogBodyCom[0].clientHeight
            var dialogMaxHeight=$(window).height()
              -($(dialogHeader)?.height()||0)
              -($(dialogFooter)?.height()||0);
            console.log("-> dialogMaxHeight", dialogMaxHeight);


            dialogBodyCom.css('maxHeight',body_clientHeight>dialogMaxHeight?dialogMaxHeight:body_clientHeight);*/

//开始设置top
//     var top=( ( $(window).height()||0)/2  -  ($(dialogCom&&dialogCom[0]).height()||0)/2 - 10  );
        // $(dialogCom&&dialogCom[0]).css('top',top)


        options && options.onAfterComonentMounted &&
        options.onAfterComonentMounted({
            dialogBodyCom,
            dialogHeader,
            dialogFooter
        });
    }


    var Constructor = await modifyDialog3(options)
    var DialogConstruct = Vue.extend(Constructor)

    var wrapperDialogDom = new DialogConstruct()
    $dom = wrapperDialogDom?.$mount?.()

    $('#app')[0].appendChild($dom.$el);


    //修改 el-dialog 居中
    dialogCom = $($dom?.$el).find('.el-dialog');


    options && options.onMounted && options.onMounted();


    //默认调整margintop 5vh
    if (!options?.top) {
        setTimeout(() => {
            dialogCom && $(dialogCom).css('marginTop', options?.marginTop || '2vh')
        })
    }


    //关闭销毁弹出框dom
    options.destroyed = () => {
        // console.log('$dom', $dom.$el);
        $dom && $dom.$el && $dom.$el.remove && $dom.$el.remove()
        // 调用 remove 方法,并确保只调用一次
        if (!isRemoveCalled && options.remove) {
            isRemoveCalled = true
            options.remove()
        }
    }

    //给实例方法参数
    $dom.init(options)
    options.$dom = $dom
    dialogMap[uuid] = options
    return $dom && $dom.initPromise()
}

FormDialog.closeAll = () => {
    Object.keys(dialogMap).map((key) => {
        dialogMap[key] &&
        dialogMap[key].$dom &&
        dialogMap[key].$dom.closeDialog &&
        dialogMap[key].$dom.closeDialog()


    })
}
FormDialog.close = function (uuid) {
    dialogMap[uuid] &&
    dialogMap[uuid].$dom &&
    dialogMap[uuid].$dom.closeDialog &&
    dialogMap[uuid].$dom.closeDialog()
}

export {FormDialog}
